<template>
	<div class="todos">
		<ul class="todo-list">
			<li v-for="(item,index) in arr" :key="index" @dblclick="dblClickFun(item)">
				<input type="checkbox" v-model="item.check" v-if="!item.isEdit">
				<div class="titleBox">
					<input class="dbTitle" v-focus type="text" v-model="item.title" v-if="item.isEdit" @blur="item.isEdit = false">
					<div class="userTitle" :class="{'h-text': item.check}" v-if="!item.isEdit">{{ item.title }}</div>
				</div>
				<span class="close" @click="del(index)" v-if="!item.isEdit">×</span>
			</li>
		</ul>
		
	</div>
</template>

<script>
	export default {
		props: {
			tlist: Array
		},
		data() {
			return {
				arr: []
			}
		},
		emits:[ 'setshowlist' ],
		methods: {
			// 删除事件(获取传过来的 index 下标)
			del(key) {
				// 不能一边循环一边删除
				// 定义一个数组等于 arr
				let delArr = [...this.arr]
				// 可以对拷贝的数据进行删除
				delArr.splice(key,1)
				// 将改变的备份数据赋值给原数据
				this.arr = [...delArr]
				// 把数据传入父组件
				this.$emit('setshowlist', this.arr)
			},
			
			// 双击编辑事件
			dblClickFun(item) {
				item.isEdit = true
			}
		},
		watch: {
			// 安全操作, 避免直接修改父组件数据
			tlist: {
				handler(val) {
					// console.log(val)
					if(val) {
						this.arr = val
					}
				},
				deep: true
			}
		},
		// 自定义指令实现聚焦
		directives: {
			'focus': {
				mounted(el) {
					setTimeout(() => {
						el.focus()
					},0)
				}
			}
		}
	}
</script>

<style>
</style>
